<!-- Uniapp + TypeScript 相关配置文档 -->
<!-- https://www.jianshu.com/p/b01b5158cfe0 -->

<!-- vue-cli创建uniapp项目报错[ app.json 文件内容错误] app.json: app.json 未找到 -->
<!-- https://blog.csdn.net/weixin_46016926/article/details/119334939 -->

<template>
	<view class="content">
		<image class="logo" @click="printTitle" src="../../static/logo.png"></image>
		<u-button type="info">{{num}}</u-button>
		<u-button type="info">{{age}}</u-button>
		<view>
			<text class="title">{{title}}12345678----</text>
		</view>
		<u-button type="primary">主要按钮21212</u-button>
		<u-button type="success">成功按钮sas</u-button>
		<u-button type="info">信息按钮</u-button>

		<text type="info" v-for="(item, index) in aaa" :key="index + 'q'">{{item}}</text>
		<text type="info" v-for="(item, index) in bbb" :key="index + 'w'">{{item}}</text>
		<text type="info" v-for="(item, index) in ccc" :key="index">{{item}}</text>
		<text type="info">{{dd}}</text>
		<text type="info">{{notSure}}</text>
		<view>联合类型: {{ddd}}</view>
		<view>用 any 表示数组中允许出现任意类型: {{anyArray[0]}}</view>
		<view>用 any 表示数组中允许出现任意类型: {{anyArray[1]}}</view>
		<view>用 any 表示数组中允许出现任意类型: {{anyArray[2].hehe}}</view>

	</view>
</template>



<script lang='ts'>
	import {
		Component,
		Vue
	} from 'vue-property-decorator';

	import {
		Animal,
		Cat,
		Animal22,
		AnimalStatic,
		publicAnimal,
		privateAnimal,
		readonlyAnimal
	} from '../../utils/class';

	import {
		Car,
		loggingIdentity,
		mySearch,
		CreateArrayFunc,
		CreateArrayFunc22
	} from '../../utils/interfaces';



	// 一定要加 @Component 装饰器，否则小程序生命周期会报错失效
	@Component({})

	export default class App extends Vue {
		// 初始化数据

		// 公共public，私有private与受保护protected的修饰符
		// 一般来说，在TypeScript里，成员都默认为public。
		title: string = 'Hello';
		// 「类型 + 方括号」表示法数组
		public aaa: string[] = ["1", "2", "3", "4", "5"];
		// 「类型 + 方括号」表示法数组
		public ccc: [string, number] = ["1", 2];
		// 使用数组泛型（Array Generic） Array<elemType> 来表示数组
		public bbb: Array < number > = [1, 2, 3, 4];
		// 联合类型
		public ddd: string | number = 100;
		public dd: boolean = false;
		public notSure: any = false;
		public num: number = 123;
		public qqqqq: string = "";
		public createdByNewBoolean: boolean = true;
		public anyArray: any[] = ["迪迪", 879, {
			hehe: "LoL"
		}];
		newDate: Date = new Date();
		onLoad() {
			this.notSure = 1234567;
			this.printTitle();
			this.alertName(0);
			this.numberFun(0);
			// 在当前页面显示导航条加载动画
			wx.showNavigationBarLoading();
			// 在当前页面隐藏导航条加载动画
			setTimeout(() => {
				wx.hideNavigationBarLoading();
			}, 2000);
			this.didi("111");
			console.log(this.createdByNewBoolean, "createdByNewBoolean");
			this.ddd = "12345678999999999999990";
			this.getString("啦啦啦");
			this.bbb.push(123, 999);
			console.log(this.bbb, "this.bbb");
			console.log(this.sun11(100, "200"));
			console.log(this.sun(100, "200"));
			console.log(this.buildName("tom", "cat"), "this.buildName");
			console.log(this.buildName("tom"), "this.buildName 只有一个参数");
			console.log(this.buildName22(undefined, "didi"));
			console.log(this.pushOther(["0"], "1", "2", 3));
			console.log(this.reverse(1234), "this.reverse");
			console.log(this.reverse("1234"), "this.reverse");
			console.log(this.toBoolean(123456), "this.toBoolean(1)");
			console.log(new Date(this.newDate.getTime()).toLocaleString(), "this.newDate");

			this.conName();
			// 元祖
			this.Tuple();
			// 枚举
			this.enumFun();

			let a = new Animal('Jack');
			console.log(a, "a--Animal--class学习");
			console.log(a.sayHi(), "a--Animal--class学习");



			let c = new Cat('Tom'); // Tom
			console.log(c.sayHi()); // Meow, My name is Tom

			let a22 = new Animal22('Jack');
			console.log(a22.name1);
			console.log(a22.sayHi(), "a--Animal--class学习");


			let static1 = new AnimalStatic();
			AnimalStatic.isAnimal(static1);

			let publicAnimal11 = new publicAnimal('publicAnimal');
			console.log(publicAnimal11.name); // Jack
			publicAnimal11.name = 'Tom';
			console.log(publicAnimal11.name); // Tom


			let readonlyAnimal11 = new readonlyAnimal("publicAnimal");
			console.log(readonlyAnimal11, "readonlyAnimal11");
			// 报错  只读
			// readonlyAnimal11.name = "迪迪";
			// console.log(readonlyAnimal11.name);



			let Car11 = new Car();
			console.log(Car11.alert(), "Car11");
			console.log(Car11.lightOn(), "lightOn");
			console.log(Car11.lightOff(), "lightOff");

			// 泛型
			console.log(this.createArray(3, 'x'), "createArray");
			console.log(this.swap([7, 'seven']), "swap");
			// "获取元素的长度，并且只能传入字符串"
			loggingIdentity("212");


			let x = {
				a: 1,
				b: 2,
				c: 3,
				d: 4
			};

			console.log(this.copyFields(x, {
				b: 10,
				d: 20
			}), "copyFields")
			
			console.log(mySearch("111", "2"), "mySearch")
			
			
			console.log(CreateArrayFunc(3, 999), "CreateArrayFunc")
			console.log(CreateArrayFunc22(3, "1212"), "CreateArrayFunc22")


		}
		//计算属性
		get age(): number {
			return this.num + 1
		}
		// 类型别名, 类型别名用来给一个类型起个新名字。
		conName() {
			type aa = number
			type name = string | number
			let a: name = 123
			let b: aa = 456
			console.log(a, "aaa") //123
			console.log(b, "bbb") //456
		}
		// 元祖
		Tuple() {
			let tom: [string, number] = ["tom", 25];
			tom[0] = 'Tom11';
			tom[1] = 25;
			tom[0] = tom[0].slice(1);
			tom[1] = Number(tom[1].toFixed(2));
			console.log(tom, "tom");
		}





		//methods 事件
		printTitle() {
			this.num = this.num + this.age;
		}
		// 可以用 void 表示没有任何返回值的函数：
		alertName(aa: number = 11): void {
			this.num = aa * 100111
		}
		// 设置传参数据类型,并且设置默认参数
		numberFun(val: number = 123): void {
			this.num = val * 10011278
		}
		didi(val: string) {
			if (typeof val === 'string') {
				console.log(val, "valvalvalvalval")
				return val;
			} else {
				throw new Error('person is not a string');
			}
		}
		// 访问联合类型的属性或方法, 访问 string 和 number 的共有属性是没问题的：
		getString(val: string | number): string {
			console.log(val.toString(), "val.toString()")
			return val.toString();
		}

		// 传入的两个参数为数字类型, 要求返回的是字符串类型
		// :string 返回变量的类型(return的数据类型为string)
		sun11(x: number, y: string): string {
			return (x + y).toString();
		}

		// 传入的两个参数一个为数字，一个为字符串, 要求返回的是数组类型
		// :string 返回变量的类型(return的数据类型为string)
		sun(x: number, y: string): [number, string] {
			return [x, y]
		}
		// 我们用 ? 表示可选的参数
		buildName(firstName: string, lastName ? : string) {
			if (lastName) {
				return `${firstName} + ${lastName}`;
			} else {
				return firstName;
			}
		}
		// 参数默认值
		buildName22(firstName: string = "默认值", lastName: string) {
			return `${firstName} + ${lastName}`;
		}
		// 剩余参数
		pushOther(array: string[], ...items: any[]) {
			items.forEach((item) => {
				array.push(item);
			});
			return array;
		}
		// 重载, 允许一个函数接受不同数量或类型的参数时，作出不同的处理。
		reverse(x: number | string): number | string | void {
			if (typeof x === 'number') {
				return Number(x.toString().split('').reverse().join(''));
			} else if (typeof x === 'string') {
				return x.split('').reverse().join('');
			}
		}
		// 断言
		toBoolean(something: any): boolean {
			return something as boolean;
		}
		// 枚举
		enumFun() {
			enum days {
				"a1",
				"a2",
				"a3",
				"a4",
				"a5",
				"a6",
				"a7"
			};
			console.log(days[0], "days")

			enum didi {
				sun = 7, Mon = 1, Tue, Web, Thu, Fri, Sat, Sat1, Sat2, Sat3
			}
			console.log(didi, "didi")

			enum lele {
				sun = 7, Mon, Tue, Web, Thu, Fri, Sat = < any > "13"
			}
			console.log(lele, "lele")

			enum color {
				red,
				green,
				blue = "blue".length
			}
			console.log(color, "color")


			enum Directions {
				Up,
				Down,
				Left,
				Right
			}
			let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
			console.log(directions, "directions");
		}

		// 泛型
		createArray < T > (length: number, value: T): Array < T > {
			let result: T[] = [];
			for (let i = 0; i < length; i++) {
				result[i] = value;
			};
			return result;
		}

		swap < T,
		U > (tuple: [T, U]): [U, T] {
			return [tuple[1], tuple[0]]
		}

		copyFields < T extends U,
		U > (target: T, source: U): T {
			for (let id in source) {
				target[id] = ( < T > source)[id];
			}
			return target;
		}









	}
</script>



<style lang="scss" scoped>
	@import 'index.scss';
</style>
